<template>
  <t-card :bordered="false">
    <!-- 自定义搜索 -->
    <custom-search
      ref="withdrawalSearchRef"
      v-slot="{ params }"
      :default-params="{ adCode: [] }"
      @submit="handleInitTable"
    >
      <t-col :span="3">
        <t-form-item label="微信用户" name="nickname">
          <t-input v-model:value="params.nickname" clearable placeholder="" />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="提现类型" name="withdrawalType">
          <t-select
            v-model:value="params.withdrawalType"
            :options="dictionaryStore.get('commission_withdrawal_type')"
            clearable
            filterable
            placeholder=""
          />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="提现状态" name="status">
          <t-select
            v-model:value="params.status"
            :options="dictionaryStore.get('withdrawal_status')"
            clearable
            filterable
            placeholder=""
          />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="创建时间" name="createTime">
          <t-date-range-picker
            allow-input
            v-model:value="params.createTime"
            clearable
            enable-time-picker
            placeholder=" "
            style="width: 100%"
          />
        </t-form-item>
      </t-col>
    </custom-search>
    <!-- 自定义表格 -->
    <custom-table
      ref="withdrawalTableRef"
      row-key="id"
      :columns="columns"
      :api="withdrawalLogListCRUD.page"
      column-controller-key="caseList"
    >
      <template #status="{ row }">
        {{ dictionaryStore.analysis('withdrawal_status', row.status) }}
      </template>
      <template #withdrawalType="{ row }">
        {{ dictionaryStore.analysis('commission_withdrawal_type', row.withdrawalType) }}
      </template>
      <template #wxUserId="{ row }">
        {{ getWxUserNameById(row.wxUserId) }}
      </template>
      <template #createTime="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <!-- v-permission="['system:case:query']" -->
      <template #operation="{ row }">
        <t-space break-line>
          <t-link theme="primary" @click="handleOpenDialog('read', { id: row.id })"> 提现审核 </t-link>
        </t-space>
      </template>
    </custom-table>
  </t-card>
</template>

<script lang="ts">
export default {
  name: 'CaseList',
};
</script>

<script setup lang="ts">
import dayjs from 'dayjs';
import { TableCol } from 'tdesign-vue-next';
import { onMounted, onUpdated, ref, useTemplateRef } from 'vue';

import { getWxFxUsers, withdrawalLogListCRUD } from '@/api/distribution/withdrawal-log';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';
import { useDictionaryStore, useUserStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();
// 用户仓库
const userStore = useUserStore();
// 自定义搜索ref
const withdrawalSearchRef = useTemplateRef('withdrawalSearchRef');
// 自定义表格ref
const withdrawalTableRef = useTemplateRef('withdrawalTableRef');
// columns
const columns: TableCol[] = [
  { colKey: 'wxUserId', title: '提现用户', width: 100 },
  { colKey: 'money', title: '提现金额/元', width: 100 },
  { colKey: 'status', title: '提现状态', width: 120 },
  // { colKey: 'adCode', title: '归属城市', width: 250 },
  { colKey: 'withdrawalType', title: '提现类型', width: 200 },
  { colKey: 'accountNumber', title: '提现账号', width: 200 },
  { colKey: 'paymentTime', title: '到账时间', width: 100 },
  { colKey: 'createTime', title: '发起提现时间', width: 180 },
  { colKey: 'remark', title: '备注', width: 200 },
  { colKey: 'operation', title: '操作', width: 100, fixed: 'right' },
];
// 处理初始化表格
const handleInitTable = () => {
  const params = { ...withdrawalSearchRef.value.params };
  withdrawalTableRef.value.initTable(params);
};
// 处理刷新表格
const handleRefreshTable = () => {
  withdrawalTableRef.value.refreshTable();
};
onUpdated(() => {
  handleRefreshTable()
})
// 获取所有分销微信用户--精简信息
const fxWxUsers = ref([]);
const getFxWxUsers = () => {
  getWxFxUsers().then((res) => {
    fxWxUsers.value = res;
    console.log(fxWxUsers.value);
  });
};

// 通过id获取微信用户名称
const getWxUserNameById = (id: number) => {
  const wxUser = fxWxUsers.value.find((item) => item.id === id);
  return wxUser ? wxUser.nickname : '';
};
onMounted(() => {
  handleInitTable();
  getFxWxUsers();
});
</script>

<style lang="less" scoped></style>
